<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>表单</title>
		<link rel="stylesheet" href="/public/ui.css" />
		<link rel="stylesheet" href="/public/index.css" />
	</head>
	<body>
		<div class="container is-max-desktop">
			<form id="signupForm" class="box">
				<h1 class="title has-text-centered">请填写表单信息</h1>
				<!-- 姓名 -->
				<div class="field">
					<label class="label" for="姓名">姓名</label>
					<div class="control">
						<input class="input" type="text" id="姓名" name="姓名" placeholder="请输入您的姓名" required />
					</div>
				</div>
				<!-- 昵称 -->
				<div class="field">
					<label class="label" for="昵称">昵称</label>
					<div class="control">
						<input class="input" type="text" id="昵称" name="昵称" placeholder="请输入您的昵称" required />
					</div>
				</div>
				<!-- 邮箱 -->
				<div class="field">
					<label class="label" for="邮箱">邮箱</label>
					<div class="control">
						<input class="input" type="email" id="邮箱" name="邮箱" placeholder="请输入您的邮箱地址" required />
					</div>
				</div>
				<!-- 电话 -->
				<div class="field">
					<label class="label" for="电话">电话</label>
					<div class="control">
						<input class="input" type="tel" id="电话" name="电话" placeholder="请输入您的电话号码" />
					</div>
				</div>
				<!-- 报名项目 -->
				<div class="field">
					<label class="label" for="活动">报名项目</label>
					<div class="control">
						<div class="select">
							<select id="活动" name="活动">
								<option value="活动1">活动1</option>
								<option value="活动2">活动2</option>
								<!-- 更多活动选项 -->
							</select>
						</div>
					</div>
				</div>
				<!-- 提交按钮 -->
				<div class="field is-grouped">
					<div class="control">
						<button type="submit" class="button is-primary">提交</button>
					</div>
				</div>
			</form>
			<div id="result"></div>
		</div>

		<script>
			document.getElementById("signupForm").addEventListener("submit", function (event) {
				event.preventDefault();
				var formData = new FormData(this);

				// 存储到LocalStorage
				for (var pair of formData.entries()) {
					localStorage.setItem(pair[0], pair[1]);
				}

				// 构建结果信息的HTML
				var resultHtml = "<h2>信息如下：</h2>";
				for (var key of formData.keys()) {
					resultHtml += "<p>" + key + ": " + localStorage.getItem(key) + "</p>";
				}

				// 将整个表单和结果信息的HTML发送到服务器
				fetch("/api/send", {
					method: "POST",
					headers: {
						"Content-Type": "application/json",
					},
					body: JSON.stringify({ formHtml: resultHtml }),
				})
					.then(response => response.json())
					.then(data => {
						if (data.success) {
							alert(data.message);
							// 设置5秒后自动关闭浏览器窗口
							setTimeout(function () {
								window.close();
							}, 1000);
						} else {
							alert(data.message);
						}
					})
					.catch(error => {
						alert("Error:", error);
					});
			});
		</script>
	</body>
</html>
